<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>订单提交</title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/weui.min.css" />
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			
			#main {
				/*border: 1px solid;*/
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				height: 500px;
			}
			
			header {
				height: 48px;
				width: 100%;
				background-color: #e62f17;
				line-height: 48px;
				background-image: url(img/sd_nav.png);
				background-size: 320px 48px;
				background-repeat: no-repeat;
				overflow: hidden;
			}
			
			a:hover {
				text-decoration: none;
			}
			
			#addNew {
				width: 100%;
				margin-top: 0px;
				height: 55px;
				border-bottom: 10px solid #efefef;
			}
			
			#addNew a {
				line-height: 45px;
				color: #666;
				width: 100%;
			}
			
			#kdzyd {
				border-bottom: 2px solid #efefef;
				height: 36px;
				line-height: 36px;
			}
			
			#shop {
				border-bottom: 10px solid #EFEFEF;
			}
			
			.row {
				margin-left: 0px;
			}
			
			.shop {
				overflow: hidden;
				/*height: 95px;*/
				padding: 15px 10px;
				border-bottom: 1px solid #efefef;
			}
			
			.shop a {
				font-family: "黑体";
			}
			
			.shop img {
				width: 60px;
			}
			
			.shop div {
				padding: 0px;
			}
			
			.shop div p {
				height: 20px;
				margin: 0px;
				line-height: 20px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.jiagecol {
				color: #e72f17;
			}
			
			.kuanshicol {
				color: #999;
			}
			
			.namecol {
				color: black;
			}
			
			#liuyan input {
				padding: 4px 0px;
				border: 1px solid #e2e2e2;
				color: #666;
				border-radius: 4px;
			}
			
			.duanxin {
				width: 100%;
				margin-top: 0px;
				height: 45px;
				border-bottom: 1px solid #efefef;
				padding-left: 10px;
			}
			
			.duanxin a {
				line-height: 45px;
				color: #000000;
				font-size: 14px;
				width: 100%;
			}
			
			.jiaqian {
				color: rgb(231, 47, 23);
				font-family: 黑体;
				font-weight: bold;
				margin-right: 30px;
			}
			
			#addaddress {
				height: 42px;
				padding: 0px 50px;
			}
			
			#addaddress a {
				height: 100%;
				padding: 0px;
				background-color: #e72f17;
				line-height: 20px;
			}
			
			#addaddress a div {
				height: 50%;
			}
		</style>
		<script src="lib/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/zepto.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//后期将这个数组删掉，从数据库中获取数据
			var shoparr = [{
				name: "缪斯之眼 正品施华洛世奇水晶 925纯银手镯手链",
				src: "img/20160304134919_54467.jpg",
				kuanshi: "合金手镯(海蓝色)",
				price: "149.00",
				count: 1
			}, {
				name: "100%头层牛皮真皮男士钱包 软皮运动款 个性刻字",
				src: "img/5_0b27427c4c46c15c5ecaf03c53a98c20.jpg_small.jpg",
				kuanshi: "款式:长款",
				price: "199.00",
				count: 2
			}];
			window.onload = function() {
				var shopdiv = document.getElementById("shop");
				for(var i = 0; i < shoparr.length; i++) {
					var shopclass = document.createElement("div");
					shopdiv.appendChild(shopclass);
					shopclass.className = "shop";
					var rowdiv = document.createElement("div");
					shopclass.appendChild(rowdiv);
					rowdiv.className = "row fl w_100";
					var a = document.createElement("a");
					rowdiv.appendChild(a);
					a.href = "javascript:;";
					a.innerHTML = '<div class="col-md-2"><img class="fl" src="' + shoparr[i].src + '" /></div><div class="col-md-4"><p class="namecol f14">' + shoparr[i].name + '</p><p></p></div><div class="col-md-4"><p class="kuanshicol f14">' + shoparr[i].kuanshi + '</p><p class="tc jiagecol f20"><i>¥ </i><span>' + shoparr[i].price + '</span></p></div>';
					var countdiv = document.createElement("div");
					rowdiv.appendChild(countdiv);
					countdiv.className = "col-md-2 f18";
					countdiv.innerHTML = '<p></p><p></p><p>X ' + shoparr[i].count + '</p>';
				}
			}
		</script>
	</head>

	<body>
		<div id="main">
			<header>
				<div class="top_back fl w_25 col_white f20 pl10 k_back glyphicon glyphicon-chevron-left" style="line-height: 48px;"></div>
				<div class="top_head w_50 tc fl col_white f20">订单提交</div>
				<div class="fl w_25"></div>
			</header>
			<div id="addNew">
				<a href="javascript:;">
					<div class="add fl f18">添加新收货人</div>
					<div class="fr f20 mr30 glyphicon glyphicon-chevron-right" style="line-height: 45px;"></div>
				</a>
			</div>
			<div id="kdzyd" class="pl20 f14">卡当自营店</div>
			<div id="shop">
				<!--<div class="shop">
					<div class="row fl w_100">
						<a href="javascript:;">
							<div class="col-md-2">
								<img class="fl" src="img/20160304134919_54467.jpg" />
							</div>
							<div class="col-md-4">
								<p class="namecol f14">缪斯之眼 正品施华洛世奇水晶 925纯银手镯手链</p>
								<p></p>
							</div>
							<div class="col-md-4">
								<p class="kuanshicol f14">合金手镯(海蓝色)</p>
								<p class="tc jiagecol f20">
									<i>¥</i>
									<span>149.00</span>
								</p>
							</div>
						</a>
						<div class="col-md-2 f18">
							<p></p>
							<p></p>
							<p>X 1</p>
						</div>
					</div>
				</div>
				<div class="shop">
					<div class="row fl w_100">
						<a href="javascript:;">
							<div class="col-md-2">
								<img class="fl" src="img/20160304134919_54467.jpg" />
							</div>
							<div class="col-md-4">
								<p class="namecol f14">缪斯之眼 正品施华洛世奇水晶 925纯银手镯手链</p>
								<p></p>
							</div>
							<div class="col-md-4">
								<p class="kuanshicol f14">合金手镯(海蓝色)</p>
								<p class="tc jiagecol f20">
									<i>¥</i>
									<span>149.00</span>
								</p>
							</div>
						</a>
						<div class="col-md-2 f18">
							<p></p>
							<p></p>
							<p>X 1</p>
						</div>
					</div>
				</div>-->
			</div>
			<div id="liuyan" class="p10">
				<input type="text" placeholder="给卖家留言....." class="w_100 f14" />
			</div>
			<div class="duanxin">
				<a href="javascript:;">
					<div class="add fl f18">发货短信通知至：</div>
					<div class="fr f20 mr10 glyphicon glyphicon-chevron-right" style="line-height: 45px;"></div>
				</a>
			</div>
			<div id="addqouhuiquan" class="duanxin">
				<a href="javascript:;">
					<div class="add fl f18">添加优惠券</div>
					<div class="fr f20 mr10 glyphicon glyphicon-chevron-right" style="line-height: 45px;"></div>
				</a>
			</div>
			<div id="zongjine" class="duanxin">
				<a href="javascript:;">
					<div class="add fl f18">订单总金额</div>
					<div class="fr f16 mr10 jiaqian" style="line-height: 45px;">￥348.00</div>
				</a>
			</div>
			<div id="addaddress" class="tc mt10">
				<a href="javascript:;" class="weui_btn weui_btn_warn">
					<div class="col_white f16">您还没有收获地址</div>
					<div class="col_white f12">去添加收获地址 完成后付款</div>
				</a>
			</div>
		</div>

	</body>

</html>